<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      #app {
        width: 200px;
        height: 300px;
        margin: 200px auto;
        padding: 5px;
        background-color: beige;
        border-radius: 10px;
        border: 2px solid bisque;
      }
      h1 {
        text-align: center;
        height: 50px;
      }
      /* label {
        display: block;
        margin-top: 10px;
        cursor: pointer;
        font-size: 0;
      } */
      input[type="checkbox"] {
        margin-right: 5px;
      }
      p {
        display: inline-block;
        width: 150px;
        font-size: 16px;
        font-weight: 400;
      }
      span {
        font-size: 12px;
        z-index: 2;
        cursor: pointer;
      }
      .finish {
        color: gray;
        text-decoration: line-through;
      }
      input[type="text"] {
        width: 150px;
        height: 20px;
        margin-bottom: 6px;
        outline: none;
        border: 1px solid rgb(247, 247, 207);
        background-color: rgb(245, 245, 220, 0.9);
      }
      input[type="text"]:focus {
        background-color: #fff;
      }
      input[type="button"] {
        height: 22px;
        width: 40px;
        line-height: 22px;
        margin-bottom: 6px;
        outline: none;
        color: white;
        border: 1px solid rgb(247, 247, 207);
        background-color: rgb(247, 192, 125);
        border-radius: 5px;
        cursor: pointer;
      }
      .cho {
        margin-bottom: 5px;
        align-items: center;
        display: flex;
        justify-content: space-between;
        position: relative;
      }
      /* .cho input[type="text"] {
        border: 1px solid rgb(247, 247, 207);
        background-color: white;
      } */
    </style>
    <!-- 使用Vue思想实现一个待办事项,todolist;
    组件,传参.记得样式要漂漂亮亮; -->
    <!-- 1. 实现界面
    2. 事件点击完成 -->
    <div id="app">
      <temtitle></temtitle>
      <todoing @addqd="fatherAddItem"></todoing>
      <cho
        v-for="(item,index) in toDoList"
        :value="item.event"
        :todo="item.event"
        :key="index"
        :index="index"
        :status="item.status"
        @add-count="fatherAddCount"
        @del="fatherdelItem"
        @edi="fatherediItem"
      ></cho>
    </div>
    <template id="temt">
      <div id="title">
        <h1>记事本</h1>
      </div>
    </template>
    <template id="choose">
      <!-- <label> -->
      <div class="cho">
        <!-- <input type="checkbox"/> -->
        <p :class="status?'finish':''" @dblclick="edi" v-if="flag" @click="add">
          {{todo}}
        </p>
        <!-- <input type="text" v-else v-model="todo"/> -->
        <span @click="delItem">X</span>
      </div>
      <!-- </label> -->
    </template>
    <template id="com">
      <div>
        <input type="text" placeholder="添加~" v-model="inputVal" />
        <input type="button" @click="qd" value="提交" />
      </div>
    </template>
    <script src="./vue.js"></script>
    <script>
      let temtitle = {
        template: "#temt",
      };
      let todoing = {
        template: "#com",
        data() {
          return {
            inputVal: "",
          };
        },
        methods: {
          qd() {
            let data = {
              event: this.inputVal,
              status: false,
            };
            console.log("我点了");
            if (data.event !== "") {
              this.inputVal = "";
              this.$emit("addqd", data);
            } else {
              console.log("输入内容不能为空！");
            }
          },
        },
      };
      let cho = {
        template: "#choose",
        props: ["todo", "status", "index"],
        data() {
          return {
            flag: true,
          };
        },
        methods: {
          add() {
            console.log("勾选");
            this.$emit("add-count", this.index);
          },
          delItem() {
            console.log("我点了", this.index, status);
            this.$emit("del", this.index, this.status);
          },
          edi() {
            console.log("双击了", this.flag);
            // this.flag = false;
            // this.$emit("edit", this.flag);
          },
          // changeCount() {
          //   console.log("失去了", this.flag);
          //   this.flag = true;
          //   // this.$emit("change", this.flag);
          // },
        },
      };
      let vm = new Vue({
        el: "#app",
        data: {
          toDoList: [
            {
              event: "吃饭",
              status: false,
            },
            {
              event: "睡觉",
              status: false,
            },
            {
              event: "打豆豆",
              status: false,
            },
          ],
        },
        components: {
          temtitle,
          cho,
          todoing,
        },
        methods: {
          fatherAddCount(id) {
            console.log("勾选", id);
            this.toDoList[id].status = !this.toDoList[id].status;
          },
          fatherAddItem(data) {
            this.toDoList.push(data);
          },
          fatherdelItem(id, sta) {
            // if (sta == true) {
            this.toDoList.splice(id, 1);
            console.log(id);
            // }
          },
          fatherediItem(fla) {
            console.log("dianl");
            this.flag = false;
          },
        },
      });
    </script>
  </body>
</html>
